/* 
px  绝对单位
em  相对于元素本身的字体大小
rem  root 根  相对于根元素的字体大小

16px=1em
16px=1rem


45px
45/16rem
*/

/* h1 {
    font-size: 40px;
}

p {
    font-size: 2em;
}

.box{
    width: 400px;
    height: 400px;
    border: 2px solid;
} */

/* img{ */
/* display: inline-block; */
/* vertical-align: middle;
    width: 200px;
    height: 100px;
} */

/* .box>div{
    width: 50px;
    height: 50px;
    background-color: aqua;
} */


/* 
响应式布局
针对不同屏幕尺寸显示不同效果
定义媒体查询 @media
min-width:900px
max-width:1200px
通过and连接范围
*/


/* .box {
    width: 800px;
    height: 400px;
    background-color: aqua;
} */


/* @media screen and (min-width:1000px) {

    /* 1000以上 */
/* .box {
        background-color: purple;
    }

}  */

/* @media screen and (max-width:700px) and (min-width:500px) {

    500-700
    .box {
        width: 400px;
        height: 200px;
        background-color: green;
    }
} */


.box {
    margin: auto;
    width: 80%;
    height: 2000px;
    border: 2px solid;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
}

.box>div {
    width: 25%;
    height: 200px;
}

.item1 {
    background-color: aqua;
}

.item2 {
    background-color: rgb(0, 255, 30);
}

.item3 {
    background-color: rgb(30, 0, 255);
}

.item4 {
    background-color: rgb(255, 0, 25);
}

/* 1000 600 */
@media screen and (min-width:600px) and (max-width:1000px) {
    .box>div {
        width: 50%;
    }

    

}

@media screen and (max-width:600px){
    .box>div{
        width: 100%;
    }
}